By default, GateIn delivers a number of built-in container layouts such as Rows, Columns, Tabs layout v.v… which you can use inside the site/page.
In the case of you want to define a new container layout, fully customize it. You can easily achieve it by implementing your own implementation of UI Container, then register it to portal via ServiceLoader and Portal extension mechanism.
We are going to explain you whole this magic work by following sample:
The custom container layout must extend from org.exoplatform.portal.webui.container.UIContainer
In this sample, we create UIAddOnContainer which uses different template and defines a custom action listener
@ComponentConfig(template = "classpath:/groovy/portal/webui/container/UIAddOnContainer.gtmpl", events = {@EventConfig(listeners = UIAddOnContainer.CustomActionListener.class)})
public class UIAddOnContainer extends UIContainer {
public static class CustomActionListener extends EventListener<UIAddOnContainer> {
System.out.prinln("This is custom action");
}
}
In the UIAddOnContainer.gtmpl template, it just render a link to trigger the action:
<a href="<%=uicomponent.event("Custom")%>>Custom Action</a>
Let's say we create a service provider org.gatein.examples.AddOnContainerFactory which is an implementation of org.exoplatform.portal.webui.container.UIComponentFactory<T>
public class AddOnContainerFactory extends UIComponentFactory<UIAddOnContainer> {
private static Log log = ExoLogger.getLogger(AddOnContainerFactory.class);
@Override
public UIAddOnContainer createUIComponent(String factoryID, WebuiRequestContext context) {
if ("ADDON_CONTAINER".equals(factoryID)) {
return create(UIAddOnContainer.class, context);
} else {
return null;
}
}
}
In this implementation, we check if the factoryID is equivalent to "ADDON_CONTAINER", then create and return a UIAddOnContainer instance. Otherwise, it retunns NULL.
Its jar file also needs to contain a file named META-INF/services/org.exoplatform.portal.webui.container.UIComponentFactory with the content is fully-qualified binary name of the service provider class:
org.gatein.examples.AddOnContainerFactory
After deploying the jar with the custom UI container layout, we can use it by configuring initial data, or even by editing layout at run-time
Here is a page layout sample:
<page-set
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_objects_1_6 http://www.gatein.org/xml/ns/gatein_objects_1_6"
xmlns="http://www.gatein.org/xml/ns/gatein_objects_1_6">
<page>
<name>samplePage</name>
<title>Sample Page</title>
<access-permissions>Everyone</access-permissions>
<edit-permission>*:/platform/administrators</edit-permission>
<container template='classpath:/groovy/portal/webui/container/UIAddOnContainer.gtmpl'>
<factory-id>ADDON_CONTAINER</factory-id>
<access-permissions>Everyone</access-permissions>
</container>
</page>
</page-set>
In this sample, you can notice that we specify "ADDON_CONTAINER" as the factory-id of the container. This is necessary information to tell Portal to initialize proper UI Container instance.
To make the custom container layout available to be used at run-time in Edit Layout mode (by Drag & Drop). You will need to override the file portal.war!/WEB-INF/conf/uiconf/portal/webui/container/ContainerConfigOption.groovy. By adding/registering the information of custom container layout, something like:
SelectItemCategory plugin = new SelectItemCategory("plugin") ;
plugin.addSelectItemOption(new SelectItemOption("pluginContainer",
"<container template=\"system:/groovy/portal/webui/container/UIAddOnContainer.gtmpl\">" +
"<factory-id>ADDON_CONTAINER</factory-id>" +
"</container>",
"PluginConntainerLayout"));
templates.add(plugin);
Again, you will notice that factory-id is indicated to the custom container layout.
As usual, you can absolutely rely on the portal extension mechanism to override this file. There will be one more item in the Composer popup for the custom container layout available to be used.